Skip to content

Fix WAVE accessibility errors for local video generation#47

Merged
skerbis merged 3 commits into
mainfrom
copilot/fix-4bb240d4-98a3-462a-9808-c5f9cb041f97
Oct 10, 2025
Merged

Fix WAVE accessibility errors for local video generation#47
skerbis merged 3 commits into
mainfrom
copilot/fix-4bb240d4-98a3-462a-9808-c5f9cb041f97

Conversation

Copilot AI commented Oct 1, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Problem

When generating local videos using the generate() method, the WAVE accessibility checker reported two errors:

WAVE Errors

  1. Missing alternative text - <media-poster> elements with empty alt="" attributes
  2. Broken ARIA menu - <media-player> missing proper ARIA labeling for local videos

Example code that triggered the errors:

$localVideo = new Video($mp4_video, 'Eigenes Video');
echo $localVideo->generate();

Solution

This PR implements two minimal fixes to resolve both accessibility issues:

1. Add aria-label to local video/audio players

For local videos and audio files, the <media-player> element now includes an aria-label attribute:

  • Uses the video title as the label when available
  • Falls back to a generic localized label ("Video-Player" or "Audio-Player") when no title is provided
  • Provides proper ARIA context for the <media-video-layout> component

Before:

<media-player title="Eigenes Video" src="..." crossorigin>

After:

<media-player title="Eigenes Video" src="..." aria-label="Eigenes Video" crossorigin>

2. Poster alt text fallback

When a poster is set without alt text via setPoster($src, ''), the video title is now used as a fallback:

  • Custom alt text provided via setPoster($src, $alt) is still preserved
  • Ensures all poster images have meaningful alternative text

Before:

<media-poster src="poster.jpg" alt="">

After:

<media-poster src="poster.jpg" alt="Eigenes Video">

Impact

  • ✅ Zero breaking changes - All existing code continues to work unchanged
  • ✅ Automatic improvement - No code changes required by users
  • ✅ Better accessibility - Resolves WAVE errors for all local video/audio players
  • ✅ Maintains flexibility - Custom alt text still works when explicitly provided

Testing

Verified across multiple scenarios:

  • Local video with title → aria-label uses title
  • Local video without title → aria-label uses generic label
  • Poster with empty alt → Uses title as fallback
  • Poster with custom alt → Preserves custom alt text

All WAVE accessibility errors are now resolved.

Original prompt

This section details on the original issue you should resolve

<issue_title>Wave Fehler</issue_title>
<issue_description>Alles aktuell.

Wenn ich ein Video so ausgebe:

// Lokales Video $localVideo = new Video($mp4_video, 'Eigenes Video'); echo $localVideo->generate();

Erhalte ich mit Wave folgende Fehler:

Image

Kann ich das irgendwie verhindern?</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #46

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@coderabbitai

coderabbitai Bot commented Oct 1, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Comment @coderabbitai help to get the list of available commands and usage tips.

@skerbis
Fix WAVE accessibility errors for local videos
7c9629a 
Co-authored-by: skerbis <791247+skerbis@users.noreply.github.com>
@skerbis skerbis requested a review from olien October 1, 2025 15:57
Copilot AI changed the title [WIP] Wave Fehler Fix WAVE accessibility errors for local video generation Oct 1, 2025
Copilot AI requested a review from skerbis October 1, 2025 15:59
@skerbis skerbis marked this pull request as ready for review October 10, 2025 14:56
Copilot AI review requested due to automatic review settings October 10, 2025 14:56
Copilot AI reviewed Oct 10, 2025
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR addresses WAVE accessibility errors when generating local video content by implementing proper ARIA labeling and alternative text handling. The changes ensure compliance with accessibility standards while maintaining backward compatibility.

  • Add aria-label attributes to local video/audio players for proper screen reader support
  • Implement fallback alt text for poster images when empty alt attributes are provided
  • Maintain existing functionality while improving accessibility compliance

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Comment thread lib/video.php
Comment thread lib/video.php Outdated
@skerbis
Update lib/video.php
80814c9 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@skerbis skerbis merged commit 5cd660f into main Oct 10, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@olien olien Awaiting requested review from olien

@skerbis skerbis Awaiting requested review from skerbis

Assignees

@skerbis skerbis

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Wave Fehler

3 participants

@skerbis